import styles from "@/styles/Datasets.module.css";
import { Button, Form, Input, Select } from "antd";
import { useEffect, useState } from "react";

type FieldType = {
  dataset: string;
  noise: number;
  fog: number;
  scale: number;
  light: number;
  geo: number;
};

const initialValues = {
  dataset: 0,
  noise: 0,
  fog: 0,
  scale: 0,
  light: 0,
  geo: 0,
};

export default function Datasets() {
  const [datasets, setDatasets] = useState<string[]>([]);
  const [cur, setCur] = useState<number>(0);
  const [input, setInput] = useState<string[]>([]);
  const [output, setOutput] = useState<string[]>([]);
  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {
    (async () => {
      const data = await getDatasets();
      setDatasets(data);
      setInput(await getInput(data[0]));
    })();
  }, []);

  async function getDatasets() {
    const res = await fetch("http://localhost:3000/dataset/name-list");
    const data = await res.json();
    return data;
  }

  async function getInput(dataset: string) {
    const res = await fetch(`http://localhost:3000/process/input/${dataset}`);
    const data = await res.json();
    return data;
  }

  async function onSelectChange(value: number) {
    const inputList = await getInput(datasets[value]);
    setCur(value);
    setInput(inputList);
    setOutput([]);
  }

  async function onFinish(values: FieldType) {
    setLoading(true);
    try {
      setOutput([]);
      // 运行处理程序
      const res = await fetch(
        `http://localhost:3000/process/run/${datasets[cur]}`,
        {
          method: "POST",
          body: JSON.stringify(values),
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      if ((await res.text()) === "success") {
        // 获取输出图片列表
        const ret = await fetch("http://localhost:3000/process/output");
        const data = await ret.json();
        setOutput(data);
      }
    } catch (err) {
      console.log(err);
    } finally {
      const data = await getDatasets();
      setDatasets(data);
      setLoading(false);
    }
  }

  return (
    <>
      <div className={styles.toolBar}>
        <Form layout="inline" onFinish={onFinish} initialValues={initialValues}>
          <Form.Item<FieldType>
            label="数据集"
            name="dataset"
            style={{ width: "260px" }}
          >
            <Select
              onChange={onSelectChange}
              options={datasets.map((item, index) => {
                return { value: index, label: item };
              })}
            ></Select>
          </Form.Item>
          <Form.Item<FieldType> label="光照" name="light">
            <Input type="number" min={0} max={100} step={0.1}></Input>
          </Form.Item>
          <Form.Item<FieldType> label="云雾" name="fog">
            <Input type="number" min={0} max={100} step={0.1}></Input>
          </Form.Item>
          <Form.Item<FieldType> label="噪声" name="noise">
            <Input type="number" min={0} max={100} step={0.1}></Input>
          </Form.Item>
          <Form.Item<FieldType> label="几何畸变" name="geo">
            <Input type="number" min={0} max={100} step={0.1}></Input>
          </Form.Item>
          <Form.Item<FieldType> label="尺度变换" name="scale">
            <Input type="number" min={0} max={100} step={0.1}></Input>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading}>
              生成
            </Button>
          </Form.Item>
          {/* <Form.Item>
            <Button
              type="primary"
              danger
              onClick={() => {
                fetch(`http://localhost:3000/dataset/${datasets[cur]}`, {
                  method: "delete",
                });
              }}
            >
              删除
            </Button>
          </Form.Item> */}
        </Form>
      </div>
      <div className={styles.container}>
        <div>
          <h5 className={styles.title}>原始数据</h5>
          <div className={styles.imageWall}>
            {input.map((item) => {
              return (
                <img
                  key={item}
                  src={`http://localhost:3000/process/input/${datasets[cur]}/${item}`}
                ></img>
              );
            })}
          </div>
        </div>
        <div>
          <h5 className={styles.title}>处理结果</h5>
          <div className={styles.imageWall}>
            {output.map((item) => {
              return (
                <img
                  key={item}
                  src={`http://localhost:3000/process/output/${item}`}
                ></img>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
}
